<template>
  <div class="default-layout">
    <div class="layout-container">
      <!-- 桌面端侧边栏 -->
      <Sidebar 
        :collapsed="collapsed" 
        @toggle="toggleSidebar" 
        class="desktop-sidebar"
      />
      
      <!-- 移动端侧边栏 -->
      <MobileSidebar 
        v-model:visible="mobileMenuVisible"
        class="mobile-sidebar"
      />
      
      <!-- 主体区域 -->
      <div class="main-container">
        <!-- 头部 -->
        <Header 
          :collapsed="collapsed" 
          @toggle-sidebar="toggleSidebar"
          @open-mobile-sidebar="openMobileSidebar"
        />
        
        <!-- 内容区域 -->
        <div class="main-content">
          <div class="content-wrapper">
            <router-view />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useAuthStore } from '@/store/modules/auth'
import Sidebar from '@/components/layout/Sidebar.vue'
import Header from '@/components/layout/Header.vue'
import MobileSidebar from '@/components/layout/MobileSidebar.vue'

const authStore = useAuthStore()
const collapsed = ref(false)
const mobileMenuVisible = ref(false)

// 加载用户菜单
onMounted(async () => {
  if (authStore.userInfo?.id && authStore.menus.length === 0) {
    await authStore.loadUserMenus()
  }
})

const toggleSidebar = () => {
  collapsed.value = !collapsed.value
}

const openMobileSidebar = () => {
  mobileMenuVisible.value = true
}
</script>

<style scoped lang="scss">
.default-layout {
  height: 100vh;
  overflow: hidden;
  
  .layout-container {
    height: 100%;
    display: flex;
    background: #f5f5f5;
  }
  
  .desktop-sidebar {
    flex-shrink: 0;
    
    @media (max-width: 768px) {
      display: none;
    }
  }
  
  .mobile-sidebar {
    @media (min-width: 769px) {
      display: none;
    }
  }
  
  .main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
  }
  
  .main-content {
    flex: 1;
    overflow: hidden;
    
    .content-wrapper {
      height: 100%;
      padding: 24px;
      overflow-y: auto;
      background: #f5f5f5;
      
      // 滚动条样式
      &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }
      
      &::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
      }
      
      &::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
        
        &:hover {
          background: #a8a8a8;
        }
      }
      
      // 为页面内容添加基础样式
      :deep(.page-container) {
        background: white;
        border-radius: 8px;
        padding: 24px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        min-height: calc(100vh - 108px);
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .default-layout {
    .main-content {
      .content-wrapper {
        padding: 16px;
        
        :deep(.page-container) {
          min-height: calc(100vh - 76px);
          padding: 16px;
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .default-layout {
    .main-content {
      .content-wrapper {
        padding: 12px;
        
        :deep(.page-container) {
          padding: 12px;
        }
      }
    }
  }
}
</style>